<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { serachHot, serachSuggest } from "@/api/search";

interface ListItem {
  value: string;
  label: string;
}
const route = useRoute();
const router = useRouter();

const keyVal = ref("");

const info: any = reactive({
  serachHot: [],
  suggestInfo: [],
  loading: false,
  listType: {
    songs: "单曲",
    artists: "歌手",
    albums: "专辑",
    playlists: "歌单",
  },
});

// 热门搜索
const getSearchHot = async () => {
  serachHot().then((res: any) => {
    info.serachHot = res.result.hots;
  });
};
getSearchHot();

// 搜索框，获取焦点时，请求热门搜索列表接口
const handleFocus = () => {
  if (keyVal.value) {
    info["loading"] = true;
    info["suggestInfo"] = [];

    getSerachSuggest();
  }
};

const remoteMethod = (query: string) => {
  keyVal.value = query;

  if (keyVal.value) {
    info.loading = true;
    info.suggestInfo = [];
    getSerachSuggest();
  }
};

// 搜索结果
const getSerachSuggest = async () => {
  serachSuggest(keyVal.value).then((res: any) => {
    info["loading"] = false;

    if (res.result.order) {
      info["suggestInfo"] = res.result.order.map((item: any) => {
        return {
          label: item,
          info: res.result[item],
        };
      });
    }
  });
};

// 默认热门搜索列表，点击后台跳转到搜索结果页面
const jumpSearch = (item: any) => {
  info.keyVal = item.first;
  if (item.first === route.query.key) {
    return;
  }
  router.push({ path: "/search", query: { key: item.first } });
};

// 搜索建议列表，点击后跳转到相对应的落地页
const jumpPage = (item: any, type: string) => {
  switch (type) {
    case "songs":
      router.push({ path: `/song/${item.id}` });
      break;
    case "artists":
      router.push({ path: "/singer", query: { id: item.id } });
      break;
    case "albums":
      router.push({ path: "/album", query: { id: item.id } });
      break;
    case "playlists":
      router.push({ path: "/playlist/detail", query: { id: item.id } });
      break;
  }
};
</script>

<template>
  <div class="search">
    <el-select
      @keyup.enter="router.push({ path: '/search', query: { key: keyVal } })"
      v-model="keyVal"
      size="default"
      style="width: 170px"
      filterable
      remote
      clearable
      reserve-keyword
      placeholder="请输入歌名、歌手或专辑"
      :fit-input-width="true"
      :remote-method="remoteMethod"
      :loading="info.loading"
      loading-text="搜索中..."
    >
      <div class="hot-search" v-if="keyVal === ''">
        <el-option
          v-for="(item, index) in info.serachHot"
          :key="item.first"
          :label="item.first"
          :value="item.first"
          @click="jumpSearch(item)"
          class="item"
        >
          <span :class="[index < 3 ? 'top-' + index : '']">{{
            index + 1 + "."
          }}</span>
          {{ item.first }}
        </el-option>
      </div>
      <el-option-group
        v-else
        v-for="list in info.suggestInfo"
        :key="info.listType[list.label]"
        :label="info.listType[list.label]"
      >
        <el-option
          v-for="(item, index) in list.info"
          :key="list.label + index"
          :label="item.name"
          :value="list.label + item.name"
          class="item"
          @click="jumpPage(item, list.label)"
        >
          {{ item.name }}
          <template v-if="list.label === 'songs'">
            -
            <span class="artists" v-for="(a, i) in item.artists" :key="i">{{
              (i !== 0 ? " / " : "") + a.name
            }}</span>
          </template>
          <template v-else-if="list.label === 'albums'">
            - <span class="artists">{{ item.artist.name }}</span>
          </template>
        </el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<style scoped lang="scss">
.hot-search {
  .top-0 {
    font-weight: bold;
    color: rgba(255, 0, 0, 1);
  }

  .top-1 {
    font-weight: bold;
    color: rgba(255, 0, 0, 0.6);
  }

  .top-2 {
    font-weight: bold;
    color: rgba(255, 0, 0, 0.4);
  }
}

.item {
  font-size: var(--el-font-size-small);
}
</style>
